import type {
  PlatformPageTypeValue,
  PlatformTypeValue,
  ThemeType,
} from '../../../../types/interfaces'
import {
  loggerDeduplicator,
  PAGE_ELEMENTS,
  PROJECT_PREFIX,
} from '../../../../types/constants'
import { BaseThemeService } from './base'

export abstract class OthersThemeService extends BaseThemeService {
  protected declare elements: any
  abstract wrapperSelector: string // 最外层增加包裹，提高特异性
  abstract name: string
  abstract platformPageType: PlatformPageTypeValue

  protected constructor(platform: PlatformTypeValue) {
    super(platform)
    this.elements = PAGE_ELEMENTS[platform]
  }

  getThemeStyles(theme: ThemeType): string {
    if (!this.elements) {
      loggerDeduplicator.error(`[${this.name}] 页面元素配置为空，无法获取主题样式`)
      return ''
    }

    const styles = `
/* ****************************************************** */
/*                   ${theme.toUpperCase()} 主题样式                        */
/* ****************************************************** */
/* ====================================================== */
/* ================= 一、样式变量定义区 ================== */
/* ====================================================== */
${this.getStyleVar(theme)}
/* ====================================================== */
/* ================= 二、全局页面样式 ==================== */
/* ====================================================== */
${this.getPageStyles(theme)}
/* ====================================================== */
/* ================= 三、主容器样式 ====================== */
/* ====================================================== */
${this.wrapperSelector} {
/* ------------------------------------------------------ */
/* ----------------- 3.1 基础布局样式 -------------------- */
/* ------------------------------------------------------ */
  ${this.getBaseStyles(theme)}
/* ------------------------------------------------------ */
/* ----------------- 3.2 核心视觉样式 -------------------- */
/* ------------------------------------------------------ */
  ${this.getMainStyles(theme)}
/* ------------------------------------------------------ */
/* ----------------- 3.3 视觉适配样式 -------------------- */
/* ------------------------------------------------------ */
  ${this.getPatchedStyles(theme)}
/* ------------------------------------------------------ */
/* ----------------- 3.4 问题修复样式 -------------------- */
/* ------------------------------------------------------ */
  ${this.getFixedStyles(theme)}
/* ------------------------------------------------------ */
/* ----------------- 3.5 公共组件样式 -------------------- */
/* ------------------------------------------------------ */
  ${this.getComponentStyles(theme)}
}
`
    return this.normalizeCssIndentation(styles)
  }

  getBaseStyles(_theme: ThemeType): string {
    return ``
  }

  protected getMainStyles(_theme: ThemeType): string {
    return ''
  }

  protected getPageStyles(_theme: ThemeType): string {
    return ''
  }

  protected getPatchedStyles(_theme: ThemeType): string {
    return ''
  }

  protected getFixedStyles(_theme: ThemeType): string {
    return ''
  }

  protected getComponentStyles(_theme: ThemeType): string {
    return ''
  }

  protected getPreStyles(theme: ThemeType): string {
    const { CONTENT_PRE } = this.elements

    if (!CONTENT_PRE || CONTENT_PRE.selector === '') {
      return ''
    }

    return `
${CONTENT_PRE.selector} {
  margin-top: 4px !important;
  background-color: var(--${PROJECT_PREFIX}-theme-bg-base) !important;
  color: var(--${PROJECT_PREFIX}-theme-code-text-primary) !important;
  border-radius: 6px !important;
  border: 1px solid var(--${PROJECT_PREFIX}-theme-border-primary) !important;
  box-shadow: var(--${PROJECT_PREFIX}-theme-shadow-sm);
  overflow-x: auto !important;
  
  ${this.scrollStyles(theme)}
  
  &::before {
    background-color: transparent !important;
  }
  
  /* 代码块中的内联代码特殊处理 */
  code {
    color: inherit !important;
    background-color: transparent !important;
    border: none !important;
  }
  
  ${this.customPreInnerStyles(theme)}
}
${this.customPreOuterStyles(theme)}
`
  }

  protected customPreInnerStyles(_theme: ThemeType) {
    return ''
  }

  protected customPreOuterStyles(_theme: ThemeType) {
    return ''
  }
}
